<template>
  <van-sticky z-index="100">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    />
  </van-sticky>

  <div class="mainWarp" style="background: #f3f3f3">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="item in list" :key="item.id">
        <van-card 
          :price="item.product.price"
          @click-thumb="toInfo(item.proid)"

          :title="item.product.name"
          :thumb="item.product.thumb_cdn"
          
        >
          <template #desc>
                <div v-html="item.product.content"></div>
          </template>
          <template #footer>
            <van-button size="mini" @click="onDelete(item.proid)">取消收藏</van-button>
          </template>
        </van-card>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";

const { proxy } = getCurrentInstance();
const business = ref(
  proxy.$cookies.get("business") ? proxy.$cookies.get("business") : {}
);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
const page = ref(1);
const limit = ref(10);
const listCount = ref(0);

const onRefresh = () => {
  list.value = [];
  page.value = 1;
  loading.value = true;
  refreshing.value = true;

  onLoad();
};

// 上拉加载
const onLoad = async () => {
  // console.log(refreshing.value);
  if (!refreshing.value && list.value.length < listCount.value) {
    page.value = page.value + 1;
  }

  if (refreshing.value) {
    setTimeout(() => {
      refreshing.value = false;
    }, 1500);
  }

    getCollectionData();
//   setTimeout(() => {
//     getCollectionData();
//   }, 1500);
};

const getCollectionData = async () => {
  let data = {
    busid: business.value.id,
    page:page.value,
    limit:limit.value,
  };
  // console.log(business.value.id);
  let result = await proxy.$api.collection(data);
  // console.log(result);
  if (result.code === 0) {
    proxy.$showNotify({
      type: "warning",
      message: result.msg,
      duration: 1500,
      onClose: () => {
        finished.value = true;
      },
    });

    return;
  }

  finished.value = false;
  loading.value = false;

  let Data = result.data;

  list.value = list.value.concat(Data.list);
  listCount.value = Data.count;
  

  if (listCount.value === list.value.length) {
    finished.value = true;
    loading.value = false;
    return;
  }
};

const onDelete = (id) => {

    proxy.$showConfirmDialog({
        title:'取消收藏',
        message:'是否确认取消收藏？'
    }).then(async (res) => {
        let data = {
            busid:business.value.id,
            proid:id
        }

        let result = await proxy.$api.CollectionDel(data);

        if(result.code === 1)
        {
            proxy.$showNotify({
                type:'success',
                message:result.msg,
                duration:1500,
                onClose:() => {
                    onRefresh();
                }
            });

            return;
        }else{
            proxy.$showNotify({
                type:'warning',
                message:result.msg,
                duration:1500
            });

            return;
        }
    }).catch((err) => {
        console.log('取消操作')
    });

}

const toInfo = (proid) => {
    proxy.$router.push({path:'/product/product/info',query:{proid:proid}});
    return;
}

const onBack = () => {
  proxy.$router.go(-1);
  return;
};
</script>